<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
    <p>总价格：{{totalPrice}}</p>
    <p>单价：{{price}}</p>
    <p>数量：{{num}}</p>
    <div>
      <button @click="num == 0 ? 0 : num--">减少数量</button>
      <button @click="num++">增加数量</button>
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        price: 20,
        num: 0
      },
      computed: {
        // 总价格totalPrice
        totalPrice () {
          return this.price * this.num
        }
      }
    })
  </script>
</body>
</html>